<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>攻略信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0">
            <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">标题</span>
            <el-input v-model="search"  size="small" clearable placeholder="标题关键字" prefix-icon="el-icon-search" style="width: 15%;" />
            <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
            <el-input v-model.number="s_userId"  size="small" clearable placeholder="请输入用户ID" prefix-icon="el-icon-search" style="width: 15%;" />
            <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">开放状态</span>
            <el-select v-model="s_isPublic" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
            
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <span style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">审核状态</span>
  <el-select v-model="s_status" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
            
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
            <el-button icon="el-icon-search" @click="load"
              style="background-color: #143371; color: aliceblue;" size="small">搜索</el-button>
            <el-button icon="el-icon-refresh-left" style="margin-left: 5px;"
              @click="reset" size="small">重置</el-button>


            <div style="float: right">

              <el-tooltip content="添加攻略" placement="top">

                <el-button style="background-color: #143371; color: aliceblue;" size="small"
                  @click="add">+新增</el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!--   表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="攻略标题">
                  <span>{{ props.row.stTitle }}</span>
                </el-form-item>
                <el-form-item label="发布人ID">
                  <p>{{ props.row.userId }}</p>
                </el-form-item>
                <el-form-item label="点赞数">
                  <p>{{ props.row.stZan }}</p>
                </el-form-item>
                <el-form-item label="收藏数">
                  <p>{{ props.row.stSc }}</p>
                </el-form-item>
                <el-form-item label="评论数">
                  <p>{{ props.row.stComment }}</p>
                </el-form-item>
                <el-form-item label="发布时间">
                  <p>{{ props.row.createTime }}</p>
                </el-form-item>
                <el-form-item label="封面">
                  <img :src="props.row.stCoverImage" alt="" style="width: 180px; height: 150px;">
                </el-form-item>
                <el-form-item label="更多图片">
                  <div style="display: flex;">
                    <img :src="item" alt="" v-for="(item, index) in props.row.detailImgs"
                      :key="index" style="width: 180px; height: 150px;">
                  </div>
                </el-form-item>
                <el-form-item label="具体内容">
                  <div v-html="props.row.context"></div>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index" />
          <el-table-column label="攻略编号" prop="stId" width="100px" />
          <el-table-column label="攻略标题" prop="stTitle" width="180px" />
          <el-table-column label="发布人ID" prop="userId" width="100px">
          </el-table-column>
          <el-table-column label="点赞" prop="stZan" sortable width="80px"/>
          <el-table-column label="收藏" prop="stSc" sortable width="80px"/>
          <el-table-column label="评论" prop="stComment" sortable width="80px"/>
          <el-table-column label="发布时间" prop="createTime" width="180px" />
          <el-table-column label="审核状态" width="120px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0" type="info">未审核</el-tag>
              <el-tag v-if="scope.row.status==1" type="success">审核通过</el-tag>
              <el-tag v-if="scope.row.status==2" type="danger">审核不通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否公开">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.pub" active-color="#13ce66" inactive-color="#ff4949" :change="changeSwitch(scope.row)">
              </el-switch>
            </template>
          </el-table-column>


          <!--   管理员操作栏-->
          <el-table-column label="审核" width="150px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status!=0" type="success">已审核</el-tag>
              <el-button v-if="scope.row.status!=1" size="mini" @click="check(scope.$index, scope.row,1)" type="success">通过</el-button>
              <el-button v-if="scope.row.status!=2" size="mini" @click="check(scope.$index, scope.row,2)" type="danger">拒绝</el-button>
              
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <div>
          <!--   添加内容弹窗-->
          <el-dialog :visible.sync="dialogVisible" title="操作" width="50%" @close="cancel" top="30px">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              
              <el-form-item label="标题" prop="stTitle">
                <el-input v-model="form.stTitle" style="width: 80%" placeholder="攻略的标题"></el-input>
              </el-form-item>
              <el-form-item label="封面图" prop="scImage">
                <el-upload action="" list-type="picture-card" :limit="1"
                  :on-preview="handlePictureCoverPreview" :on-remove="handleCoverRemove" accept=".jpg,.png"
                  :on-exceed="handleExceed"
                  :file-list="cover_list"
                  :http-request="UploadCover"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="CoverdialogVisible">
                  <img width="100%" :src="CoverdialogImageUrl" alt="">
                </el-dialog>
             
              </el-form-item>
              <el-form-item label="景点图片(最多9张)" prop="scImages">
                <el-upload action="" list-type="picture-card" :limit="9"
                  :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                  accept=".jpg,.png"
                  :on-exceed="handleNineExceed"
                  :auto-upload="true"
                  :file-list="more_list"
                  :http-request="UploadMore"
                  multiple
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="MoredialogVisible">
                  <img width="100%" :src="MoredialogImageUrl" alt="">
                </el-dialog>
             
              </el-form-item>
              <el-form-item label="详细介绍" prop="context">
                <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="form.context"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
              </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { Col } from 'element-ui'
//导入相关组件
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      //stc
      dialogloading:false,
      cover_list:[],
      more_list:[],
      CoverdialogImageUrldialogImageUrl:'',
      CoverdialogVisible:false,
      MoredialogImageUrl:'',
      MoredialogVisible:false,
      editor:null,
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', 
//相关参数
      options:[
      {
        value:1,
        label:'公开'
      },
      {
        value:0,
        label:'封禁'
      }
      ],
      options2:[
      {
        value:0,
        label:'未审核'
      },
      {
        value:1,
        label:'通过'
      },
      {
        value:2,
        label:'未通过'
      },
      ],
      //搜索-开放状态，审核状态
      s_isPublic:'',
      s_status:'',
      search: "",
      s_userId:null,

      //加载
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
     
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          stId: 1,
          stTitle: '张家界森林公园',
          stZan: 1,
          stSc: 2,
          stComment:2,
          context: '<h4>111111111<h4>',
          createTime: '2023-11-09 19:00:11',
          detailImgs: ['lhs3.jpg', 'ls1.jpg', 'sqs6.jpg'],
          pub:true,
          stCoverImage: 'lhs4.jpg',
          status: 1,
          userId:20200001
        }
      ],//默认数据项
      form:  {
          stId: null,
          stTitle:null,
          context: null,
          detailImgs: ['lhs3.jpg', 'ls1.jpg', 'sqs6.jpg'],
          stCoverImage: 'lhs4.jpg',
        },
      rules: {
     
        stTitle: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
      
        context: [{ required: true, message: "请输入文章内容", trigger: "change" }],
       
      },
      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    //stc
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    UploadCover(data){
      var formData = new FormData()
      formData.append('type','st')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("图片文件",data)
      console.log("现在的图片",this.cover_list)
      request.post("/scenery/upload",formData).then(res=>{
        if(res.code==='1'){
          this.cover_list = []
          this.cover_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      
      })
    },
    UploadMore(data){
      var formData = new FormData()
      formData.append('type','st')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("上传详细图片",data)
      console.log("现在的图片",this.more_list)
      request.post("/scenery/upload",formData).then(res=>{
        if(res.code==='1'){
         // this.cover_list = []
          this.more_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      })
    },
    handleRemove(file, fileList) {
      console.log("删除",file, fileList);
      this.more_list = this.more_list.filter(item=>{
        return item.name!=file.name
      })
    },
    handleCoverRemove(file,fileList){
      console.log("删除",file, fileList);
      this.cover_list = []
    },
    handlePictureCoverPreview(file){
      this.CoverdialogImageUrldialogImageUrl = file.url;
      this.CoverdialogVisible = true;
    },
    handlePictureCardPreview(file) {
      this.MoredialogImageUrl = file.url
      this.MoredialogVisible = true
    },
    handleExceed(){
      this.$message.warning(`只允许上传一张图片`);
    },
    handleNineExceed(){
      this.$message.warning(`只允许上传9张图片`);
    },

    async load() {
      request.get("/strategy/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                userId:this.s_userId,
                s_isPublic:this.s_isPublic,
                s_status:this.s_status
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },

    reset() {
      this.search = null
      this.s_isPublic = null
      this.s_userId = null
      this.s_status = null
      this.currentPage = 1;
      this.pageSize = 10
      this.load()
    },

    check(index,row,status){
      request.get("/strategy/check",{
        params : {
          stId:row.stId,
          userId:row.userId,
          status:status
        },
      }

      ).then(res=>{
        if(res.code==='1'){
          this.tableData[index] = status
          this.load()
          console.log("修改成功")
        }
      })
    },

    changeSwitch(e){
      console.log(e)
      request.get("/strategy/updatePub",{
        params:{
          stId:e.stId,
          pub:e.pub
        }
      }).then(res=>{
        console.log("修改成功")
      })
    },

    cancel() {
      this.form = {}
      this.dialogVisible = false;
      this.cover_list=[]
      this.more_list=[]
    },

    save() {
      this.$refs.form.validate(vaild => {
        if (vaild) {
            //发post请求
            this.form.stCoverImage = this.cover_list[0].url
            this.form.detailImgs = []
            for(var i=0;i<this.more_list.length;i++){
              
              this.form.detailImgs.push(this.more_list[i].url)
              
            }
            console.log(this.form)
            request.post("/strategy/adminadd", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.search = null
                this.s_isPublic = null
                this.s_userId = null
                this.s_status = null
                this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
          
        }
      })


    },


    add() {
      this.dialogVisible = true;
      this.judge = false;
      this.form={}
    },

    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },

    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },

    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }

  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
.el-upload-list__item {
  transition: none !important;
}

</style>